<template>
	<view>
		<view v-if="isSelf">
			<view class="img">
				<image :src="cardDetail.charge_image"></image>
			</view>
			<view class="info">
				<view><text>会员权益：</text>{{cardDetail.equities_name}}</view>
				<view><text>有效日期：</text>{{cardDetail.closing_date}}</view>
			</view>
			<!-- <view class="btn">我要续费</view> -->
		</view>
		<view class="none" v-else>您当前没有可使用的会员卡，快去<navigator hover-class="false" url="/pages/membernew/card">抢购</navigator>吧</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	export default {
		data() {
			return {
				newTime: Date.parse(new Date()) / 1000, //当前时间
				cardDetail: uni.getStorageSync('userInfo'), //个人信息
				isSelf: false
			}
		},
		onLoad() {
			if(this.newTime < this.cardDetail.closing_date) {
				this.isSelf = true;
				this.cardDetail.closing_date = util.getFormatTime(this.cardDetail.closing_date);
			}
		}
	}
</script>

<style>
	.img {
		padding: 30upx 66upx;
		height: 318upx;
		width: calc(100% - 132upx);
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 20upx;
		box-shadow: 0px 2upx 8upx rgba(74, 27, 41, 0.1);
	}

	.info {
		margin: 0 30upx;
	}

	.info view {
		display: flex;
		color: #333333;
		font-size: 34upx;
		padding-bottom: 20upx;
		border-bottom: 1upx solid #E5E5E5;
	}

	.info view text {
		white-space: nowrap;
	}

	.btn {
		position: fixed;
		bottom: 30upx;
		left: 30upx;
		color: #FFFFFF;
		font-size: 34upx;
		text-align: center;
		height: 80upx;
		line-height: 80upx;
		border-radius: 10upx;
		background-color: #00D5A2;
		width: calc(100% - 60upx);
	}
	.none{
		color: #666666;
		font-size: 34upx;
		margin: 200upx 150upx;
		text-align: center;
	}
	.none navigator{
		color: #00D5A2;
		display: inline-block;
	}
</style>
